<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title>WebDesign</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
	  <div class="left1">
	    <div>
	      <img src="images/design_06.png">
	      <img src="images/design_18.png">
	      <img src="images/design_48.png">
	      <img src="images/design_55.png">
	    </div>
	    <div>
				<img src="images/design_101.png">
	      <img src="images/design_102.png">
	    </div>
	  </div>
		<div class="left2">
			<div class="left2content left2top">
				<span class="left2title">MENU</span>
				<img src="images/design_09.png"><br>
				<span>Overview</span><br>
				<span>Scales</span>
				<img src="images/design_20.png"><br>
				<span>Your Staff</span><br>
				<span>Analytics & Targeting</span><br>
				<span>What's New</span>
			</div>
			<div class="left2content left2middle">
				<span class="left2title">YOUR PRODUCTS</span>
				<img src="images/design_09.png"><br>
				<span>Books</span><br>
				<span>Tutorials</span><br>
				<span>Stocks</span><br>
				<span>Infographics</span>
			</div>
			<div class="left2content left2bottom">
				<span class="left2title">DASHBOARD</span>
				<img src="images/design_09.png"><br>
				<span class="choosed">Messages</span>
				<img src="images/design_76.png"><br>
				<span>Connections</span><br>
				<span>Integrations</span>
				<img src="images/design_83.png"><br>
				<span>Account Settings</span><br>
				<span>App Settings</span>
			</div>
			<div class="monthly">
				<span>Monthly Goals</span>&nbsp;&nbsp;&nbsp;
				<span>$580/$3200</span>
				<img src="images/design_105.png">
			</div>
		</div>
		<div class="right">
			<div class="righttop">
				<span>Messages</span>
				<div>
					<div class="personInfo">
						<img src="images/design_03.png">
						<span>Jordan J.</span><br>
						<span>Administrator</span>
						<img src="images/design_12.png">
					</div>
				</div>
			</div>
			
			<div class="rightcontent">
				<div class="rightcontent1">
					<div class="searchDiv">
						<input type="text">
						<img src="images/design_22.png">
					</div>
					<!-- 嵌套一层div实现滚动时不显示滚动条 -->
					<div class="scrollNoSee">
					<div class="messagesCon">
						<!-- message 1 -->
						<div class="mesWatching">
							<img src="images/design_46.png" class="logo">
							<div class="bluepoint"></div>
							<span class="name userChoosed">Bessie Berry</span>
							<span class="source">Twitter</span>
							<span class="time">3m</span>
							<span class="mesContent">Can you say apple?balabalabalabalalllla</span>
							<img src="images/design_51.png" class="mesNum">
						</div>
						<!-- message 2 -->
						<div>
							<img src="images/design_58.png" class="logo">
							<span class="name userUnchoosed">Victor Weber</span>
							<span class="source">Adobe</span>
							<span class="time">8m</span>
							<span class="mesContent">Can you say apple?balabalabalabalalllla</span>
						</div>
						<!-- message 3 -->
						<div>
							<img src="images/design_72.png" class="logo">
							<span class="name userUnchoosed">Dustin Benson</span>
							<span class="source">Facebook</span>
							<span class="time">Yesterday</span>
							<span class="mesContent">Can you say apple?balabalabalabalalllla</span>
						</div>
						<!-- message 4 -->
						<div>
							<img src="images/design_78.png" class="logo">
							<span class="name userUnchoosed">Jack Mason</span>
							<span class="source">Yahoo</span>
							<span class="time">3m</span>
							<span class="mesContent">Can you say apple?balabalabalabalalllla</span>
						</div>
						<!-- message 5 -->
						<div>
							<img src="images/design_86.png" class="logo">
							<span class="name userUnchoosed">Bessie Berry</span>
							<span class="source">Twitter</span>
							<span class="time">3m</span>
							<span class="mesContent">Can you say apple?balabalabalabalalllla</span>
						</div>
						<!-- message 6 -->
						<div>
							<img src="images/design_95.png" class="logo">
							<span class="name userUnchoosed">Stefen Shetom</span>
							<span class="source">Twitter</span>
							<span class="time">13 Jan</span>
							<span class="mesContent">Can you say apple?balabalabalabalalllla</span>
						</div>
						<!-- message 7 -->
						<div>
							<img src="images/design_97.png" class="logo">
							<span class="name userUnchoosed">Stefen Shetom</span>
							<span class="source">Twitter</span>
							<span class="time">13 Jan</span>
							<span class="mesContent">Can you say apple?balabalabalabalalllla</span>
						</div>
					</div>
					</div>
				</div>
				<div class="rightcontent2">
					<div class="rightcontent2Top">
						<span class="sender">Bessle Berry</span>
						<div class="greenpoint"></div>
            <div class="but3">
  						<button class="addContacts"><img src="images/design_30.png"></button>
              <button class="share"><img src="images/design_32.png"></button>
              <button class="delete"><img src="images/design_35.png"></button>
            </div>
						<span class="ratio">1 of 28</span>
            <div class="but2">
              <button class="previous"><img src="images/design_25.png"></button>
              <button class="next"><img src="images/design_27.png"></button>
            </div>
					</div>
					<div class="communication">
            <div class="commuSection">
              <img src="images/design_46.png" class="commuPhoto1">
              <span class="commuName1">Bessle Berry</span>
  						<span class="commuTime1">8:31 AM</span>
  						<span class="commuCon1">We learn cat calls together, meow meow meow, meow meow, meow meow meow meow in front of you.We learn cat calls together, meow meow meow, meow meow, meow meow meow meow in front of you.</span>
              <img src="images/design_80.png" class="commuPhoto2">
              <span class="commuName2">Bessle Berry</span>
              <span class="commuTime2">8:31 AM</span>
              <span class="commuCon2">We learn cat calls together, meow meow meow, meow meow, meow meow meow meow in front of you.>We learn cat calls together, meow meow meow, meow meow, meow meow meow meow in front of you.>We learn cat calls together, meow meow meow, meow meow, meow meow meow meow in front of you.We learn cat calls together, meow meow meow, meow meow, meow meow meow meow in front of you.We learn cat calls together, meow meow meow, meow meow, meow meow meow meow in front of you.</span>
              <div class="bottomTag1">Tuesday</div>
            </div>
            <div class="commuSection">
              <img src="images/design_46.png" class="commuPhoto1">
              <span class="commuName1">Bessle Berry</span>
              <span class="commuTime1">8:31 AM</span>
              <span class="commuCon1">We learn cat calls together, meow meow meow, meow meow, meow meow meow meow in front of you.We learn cat calls together, meow meow meow, meow meow, meow meow meow meow in front of you.</span>
              <img src="images/design_80.png" class="commuPhoto2">
              <span class="commuName2">Bessle Berry</span>
              <span class="commuTime2">8:31 AM</span>
              <span class="commuCon2">We learn cat calls together, meow meow meow, meow meow, meow meow meow meow in front of you.>We learn cat calls together, meow meow meow, meow meow, meow meow meow meow in front of you.>We learn cat calls together, meow meow meow, meow meow, meow meow meow meow in front of you.We learn cat calls together, meow meow meow, meow meow, meow meow meow meow in front of you.We learn cat calls together, meow meow meow, meow meow, meow meow meow meow in front of you.</span>
              <img src="images/design_88.png" class="commuPic1">
              <img src="images/design_90.png" class="commuPic2">
              <div class="bottomTag2">New Messages</div>
            </div>
            <div class="commuAnswer">
              <input type="button">
              <input type="text" placeholder="Input something...">
            </div>
          </div>
				</div>
			</div>
		</div>
	</div>
	<script src="jquery.min.js"></script>
  <script>
    var autoHeight = function(){
      var winHeight = 0;
      if(window.innerHeight)
        winHeight = window.innerHeight;
      document.getElementsByClassName("left1")[0].style.height = winHeight + "px";
      document.getElementsByClassName("left2")[0].style.height = winHeight + "px";
    }
    window.onload = autoHeight;
    window.onresize = autoHeight;
    $(".left2content  span").each(function(){
			if($(this).attr('class') !== "left2title" && $(this).attr('class') !== "choosed" ){
				$(this).css("color","#ccc");
			}
		});
  </script>
</body>
</html>